<template>
  <div class="content-container" v-loading="loading">
    <!-- 顶部数据汇总区域 -->
     <div class="card-box">
      <!-- 我负责的需求 -->
      <!-- <el-card class="card-box-item" shadow="hover" v-show="isShowMy" @click="handleRequirements(1)"> -->
      <el-card class="card-box-item" shadow="hover" v-if="isDirector == '555' || isDirector == '999'" @click="handleRequirements(1)">
        <div class="card-top">
          <div class="card-top-left">
            <el-icon :size="58" color="#FF0000"><User /></el-icon>
          </div>
          <div class="card-top-right">
            <div class="card-top-right-1">
              <el-text class="card-top-right-title">我负责的需求</el-text>
            </div>
            <div class="card-top-right-total" v-if="initRequirementsNum.requirementsNum !== null">{{ initRequirementsNum.requirementsNum }}</div>
            <div class="card-top-right-total" v-else>0</div>
          </div>
        </div>
        <div class="card-bottom">
          <el-row :gutter="20" justify="space-between" style="color: #FF0000;">
            <el-col :span="8">未分配：{{ initRequirementsNum.notAvgRequirementNum }}</el-col>
            <el-col :span="8">进行中：{{ initRequirementsNum.avgRequirementNum }}</el-col>
            <el-col :span="8">已关闭：{{ initRequirementsNum.closeAvgRequirementNum }}</el-col>
          </el-row>
        </div>
      </el-card>
      <!-- 我的研发任务 -->
      <el-card class="card-box-item" shadow="hover" @click="handleRequirements(2)">
        <div class="card-top">
          <div class="card-top-left">
            <el-icon :size="58" color="#67C23A"><Document /></el-icon>
          </div>
          <div class="card-top-right">
            <div class="card-top-right-1">
              <el-text class="card-top-right-title">研发任务</el-text>
              <!-- <el-icon :size="20" color="#A4A4A4"><DocumentCopy /></el-icon> -->
            </div>
            <div class="card-top-right-total">{{ pvpRequirementsNum.requirementsNum }}</div>
          </div>
        </div>
        <div class="card-bottom">
          <el-row :gutter="20" justify="space-between" style="color: #67C23A">
            <el-col :span="8">未完成：{{ pvpRequirementsNum.notAvgRequirementNum }}</el-col>
            <el-col :span="8">已上线：{{ pvpRequirementsNum.finishRequirementNum }}</el-col>
            <el-col :span="8">已关闭：{{ pvpRequirementsNum.closeAvgRequirementNum }}</el-col>
          </el-row>
        </div>
      </el-card>
      <!-- 缺陷 -->
      <el-card class="card-box-item" shadow="hover" @click="handleRequirements(3)">
        <div class="card-top">
          <div class="card-top-left">
            <el-icon :size="58" color="#263CCC"><Warning /></el-icon>
          </div>
          <div class="card-top-right">
            <div class="card-top-right-1">
              <el-text class="card-top-right-title">缺陷</el-text>
              <!-- <el-icon :size="20" color="#A4A4A4"><Connection /></el-icon> -->
            </div>
            <div class="card-top-right-total">0</div>
          </div>
        </div>
        <div class="card-bottom">
          <el-row :gutter="20" justify="start" style="color: #263ccc">
            <el-col :span="12">进行中：</el-col>
            <el-col :span="12">已关闭：</el-col>
          </el-row>
        </div>
      </el-card>
      <!-- 每日日报 -->
      <el-card class="card-box-item" shadow="hover">
        <div class="card-top">
          <div class="card-top-left">
            <el-icon :size="58" color="#08BCE0"><EditPen /></el-icon>
          </div>
          <div class="card-top-right">
            <div class="card-top-right-1">
              <el-text class="card-top-right-title">每日日报</el-text>
              <!-- <el-icon :size="20" color="#A4A4A4"><PriceTag /></el-icon> -->
            </div>
            <div class="card-top-right-total">0</div>
          </div>
        </div>
        <div class="card-bottom">
          <el-row :gutter="20" justify="space-between" style="color: #08BCE0;">
            <el-col :span="8">未分配：</el-col>
            <el-col :span="8">进行中：</el-col>
            <el-col :span="8">已关闭：</el-col>
          </el-row>
        </div>
      </el-card>
     </div>

     <!-- 数据列表展示区域 -->
      <div class="list-box">
        <BugListVue></BugListVue>
      </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import useUserStore from "@/store/modules/user";
import { useRouter } from "vue-router";
import { postInitRequirement, postPVPRequirement } from "@/api/newDemands/index";
import { ElMessage } from "element-plus";
import  BugListVue  from "./list/bugList.vue";


const loading = ref(false);
const router = useRouter();
const useUser = useUserStore();
const isShowMy = ref(false);//是否为技术负责人
const isDirector = ref<any>();//是否为技术负责人
const initRequirementsNum = reactive<any>({
  requirementsNum:0,
  avgRequirementNum:0,
  notAvgRequirementNum:0,
  closeAvgRequirementNum:0
});//我负责的需求数据

const pvpRequirementsNum = reactive<any>({
  requirementsNum:0,
  finishRequirementNum:0,
  notAvgRequirementNum:0,
  closeAvgRequirementNum:0
});//我的研发任务


/* // // 获取初始数据
// const getInitData = async () => {
//   loading.value = true;
//   isShowMy.value = useUser.$state.isHead;

//   await useCommonStore.getAllInitRequirement();
//   await useCommonStore.postAllPVPRequirement({
//     projectTitle: "",
//     isClose: 0,
//     beginTime: null,
//     endTime: null
//   });
//   // 我负责的需求
//   allInitRequirements.value = useCommonStore.$state.allInitRequirementData;
//   // 研发任务
//   allPvpRequirements.value = useCommonStore.$state.allPVPRequirementData;


//   // 处理研发数据：未完成finiah、进行中avg、已关闭close
//   for (var i = 0; i < allPvpRequirements.value.length; i++) {
//     if (allPvpRequirements.value[i].requirmentChildStatus === 9) {
//       pvpStatusTotal.value.closePvpRequirement++;
//     } else if (allPvpRequirements.value[i].requirmentChildStatus === 7) {
//       pvpStatusTotal.value.finishPvpRequirement++;
//     } else {
//       pvpStatusTotal.value.avgPvpRequirement++;
//     }
//   }

//   loading.value = false;

// } */

// 获取所有负责的需求
const getInitData = async () => {
  loading.value = true;
  // 获取我负责的需求
  const { data } = await postInitRequirement({
    projectTitle: "",
    beginTime: null,
    endTime: null
  });
  if (data.code === 200) {
    if(data.data.requirements  !== null) {
      // 我负责的需求计数
      initRequirementsNum.requirementsNum = data.data.requirements.length;
      initRequirementsNum.avgRequirementNum = data.data.avgRequirementNum;
      initRequirementsNum.notAvgRequirementNum = data.data.notAvgRequirementNum;
      initRequirementsNum.closeAvgRequirementNum = data.data.closeAvgRequirementNum;
    } else {
      initRequirementsNum.requirementsNum = 0;
      initRequirementsNum.avgRequirementNum = 0;
      initRequirementsNum.notAvgRequirementNum = 0;
      initRequirementsNum.closeAvgRequirementNum = 0;
    }
    loading.value = false;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  };

  // 获取我的研发任务
  const resData = await postPVPRequirement({
    projectTitle: "",
    beginTime: null,
    endTime: null
  });
  if (resData.data.code === 200) {
    if(resData.data.data !== null) {
      pvpRequirementsNum.requirementsNum = resData.data.data.length;

      for (var i = 0; i < resData.data.data.length; i++) {
        if(resData.data.data[i].requirementChildStatus === 9) {
          pvpRequirementsNum.closeAvgRequirementNum++;
        } else if (resData.data.data[i].requirementChildStatus === 7) {
          pvpRequirementsNum.finishRequirementNum++;
        } else {
          pvpRequirementsNum.notAvgRequirementNum++;
        }
      }
    } else {
      pvpRequirementsNum.finishRequirementNum = 0;
      pvpRequirementsNum.notAvgRequirementNum = 0;
      pvpRequirementsNum.closeAvgRequirementNum = 0;
      pvpRequirementsNum.requirementsNum = 0;
    }
    loading.value = false;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }

  loading.value = false;
}

// 点击顶部卡片时跳转到对应的页面
const handleRequirements = (index: number) => {
  if (index === 1) {
    // 我负责的需求
    router.push({
      path: "/requirement/distribute",
    });
  } else if (index === 2) {
    // 我的研发任务
    router.push({
      path: "/requirement/research"
    })
  } else if (index === 3) {
    // Bug缺陷
    router.push({
      path: "/experiment/bugs"
    })
  }

}

onMounted(async () => {
  isDirector.value = localStorage.getItem("authorityId");
  await getInitData();
  isShowMy.value = useUser.$state.isHead;
})
</script>

<style scoped lang="scss">
.content-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;

  // 顶部数据展示区域
  .card-box {
    width: 100%;
    height: 110px;
    margin-bottom: 20px;
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    flex-direction: row;
    .el-card {
      --el-card-padding: 10px;;
    }
    .card-box-item {
      width: 240px;
      // width: 25%;
      height: 100%;
      margin-right: 20px;
      display: flex;
      justify-content: start;
      flex-direction: column;  
      cursor: pointer;
      
      .card-top {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: start;
        .card-top-right {
          width: 70%;
          .card-top-right-1 {
            white-space: nowrap;
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            flex-direction: row;
            .card-top-right-title {
              font-size: 1.25rem;
              padding-right: 10px;
            }
            }
            .card-top-right-total {
              font-size: 1.5rem;
              font-weight: bold;
              text-align: center;
              padding-right: 32px;
            }
          }
        }
        
        .card-bottom {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          white-space: nowrap;
          font-size: 0.75rem;
        }
    }

    .card-box-item:hover {
      background-color: rgb(235.9, 245.3, 255);
    }
  }

  // 数据列表展示区域
  .list-box {
    width: 100%;
    height: calc(100% - 130px);
  }
}
</style>

<style>
.custom-label {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px;
  border-radius: 4px;
  background-color: pink;
  color: #333;
  cursor: pointer;
}

.custom-label:hover {
  background-color: #e6e8ea;
}
</style>
